<template>
	<view class="page" style="overflow: hidden;">
		<lexiconNavVue title="蜂达人" />
		<view class="main" style="overflow: hidden;">
			<view class="level_item level_1">
				<view style="display: flex;flex-direction: column;align-items: center;overflow: hidden;">
					<view class="" style="">
						<image mode="widthFix" style="width: 106px;overflow: hidden;margin-bottom: 10px;"
							:src="'/static/image/fdr/'+ alias +'1.png'"></image>
					</view>
				</view>
			</view>
			<view class="level_item level_2">
				<view class="">
					<titleBar :title="'| '+type+' |'" :enTitle="enTitle" :titlefs="22"></titleBar>
				</view>
				<view style="display:flex;flex-direction: column;margin: 10px 0px;">
					<view class="range">
						评测难度：{{grade}}
					</view>
					<!-- 		<view class="range">
						题目数量：1道
					</view> -->
				</view>
				<view class="">
					<view class="pipei_room_btn" @click="fnStart()" style="width: 83%;">
						点击开始
						<view class="btn-en">Start</view>
					</view>
				</view>
			</view>
			<!-- 			<view class="level_item level_3">
			</view> -->
		</view>
	</view>
</template>

<script>
	import titleBar from '../../components/games/title-bar.vue'
	import navbar from '../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			titleBar,
			navbar,
		},
		data() {
			return {
				grade_id: '',
				type_id: '',
				grade: '',
				type: '',
				scrollHeight: '',
				alias: '',
				enTitle: ''
			};
		},
		onReady() {

		},

		onUnload() {

		},
		onShow() {
			const systemInfo = uni.getSystemInfoSync();
			// this.isPad = systemInfo.screenWidth > 600 && systemInfo.pixelRatio < 3;
			// if (this.isPad) {
			// #ifdef APP-PLUS
			// plus.screen.lockOrientation('landscape-primary');
			// #endif
			// }
		},

		onLoad(options) {
			var that = this;
			console.log('options=======', options);
			that.type_id = options.type_id;
			that.grade_id = options.grade_id;
			that.type = options.type;
			that.grade = options.grade;
			that.alias = options.alias;
			that.enTitle = options.en;
			that.flag = options.flag;
			// const systemInfo = uni.getSystemInfoSync();
			// this.isPad = systemInfo.screenWidth > 600 && systemInfo.pixelRatio < 3;
			// if (this.isPad) {
			// 	// #ifdef APP-PLUS
			// 	plus.screen.lockOrientation('landscape-primary');
			// 	// #endif
			// }
		},
		methods: {
			// 创建房间
			fnStart() {
				var that = this;
				console.log('this.flag', this.flag);
				if (this.flag === 'yyxz' && "英语写作") {
					uni.navigateTo({
						url: '/pages/bmaster/oralAssessment_writing?grade_id=' + that.grade_id + '&type_id=' + that
							.type_id
					})
				} else if (this.flag === 'stxs' && "识图叙事") {
					uni.navigateTo({
						url: `/pages/bmaster/masterRoomList?grade_id=${that.grade_id}&type_id=${that.type_id}&type=${that.type}&grade=${that.grade}&alias=${that.alias}&en=${that.enTitle}&flag=${that.flag}`
					})
				} else if (this.flag === 'scfy' && "识词发音") {
					uni.navigateTo({
						url: `/pages/bmaster/masterRoomList?grade_id=${that.grade_id}&type_id=${that.type_id}&type=${that.type}&grade=${that.grade}&alias=${that.alias}&en=${that.enTitle}&flag=${that.flag}`
					})
				} else if (this.flag === 'cjpy' && "场景配音") {
					uni.navigateTo({
						url: `/pages/bmaster/masterRoomList?grade_id=${that.grade_id}&type_id=${that.type_id}&type=${that.type}&grade=${that.grade}&alias=${that.alias}&en=${that.enTitle}&flag=${that.flag}`
					})
				} else if (this.flag === 'htsk' && "话题思考") {
					uni.navigateTo({
						url: `/pages/bmaster/masterRoomList?grade_id=${that.grade_id}&type_id=${that.type_id}&type=${that.type}&grade=${that.grade}&alias=${that.alias}&en=${that.enTitle}&flag=${that.flag}`
					})
				}	else if (this.flag === 'wzyd' && "文章阅读") {
					uni.showToast({
						title: '敬请期待',
						icon: 'none',
						duration: 2000
					})
					// uni.navigateTo({
					// 	url: `/pages/bmaster/masterRoomList?grade_id=${that.grade_id}&type_id=${that.type_id}&type=${that.type}&grade=${that.grade}&alias=${that.alias}&en=${that.enTitle}&flag=${that.flag}`
					// })
				}
			},

		}
	}
</script>

<style lang="scss">
	.page {
		background-image: url(/static/image/app/gameBg.png);
		// background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		text-align: center;
		font-family: hzgb;
	}

	.main {
		// border: 2px solid blue;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// overflow-y: auto;
		// position: relative;

		.level_item {
			// overflow: hidden;
		}
	}

	.level_1 {
		// flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.level_2 {
		height: 250px;
		border-radius: 20px;
		color: white;
		background-image: linear-gradient(to bottom, rgba(128, 128, 128, 0.33), rgba(128, 128, 128, 0.17));
		padding: 25px 100px;

		.pipei_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			// line-height: 50px;
			padding-top: 12px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 16px auto 0;
		}

		.pipei_room_btn_ing {
			width: 200px;
			color: white;
			margin: 20px auto 0;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ff2b1d, #ff2b1d);
			box-shadow: 0px 7px 0px 0px rgba(184, 28, 37, 1);
			margin: 0 auto;
		}

		.create_room_btn {
			width: 200px;
			color: black;
			margin: 0 auto;
			background: yellow;
			border-radius: 12px;
			height: 50px;
			line-height: 50px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 7px 0px 0px rgba(209, 165, 77, 1);
			margin: 0 auto;
		}

		.show_room_btn {
			width: 45%;
			margin: 20px auto;
			border-radius: 21px;
			background-position: center center;
			background-size: 100% 100%;
			height: 40px;
			// line-height: 40px;
			padding-top: 6px;
			color: black;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0px 6px 0px 0px #d1a54d;
		}

		.room_box {
			display: flex;
			flex-direction: column;

			height: auto;
			margin: 20px;

			.room_search {
				display: flex;
				flex-direction: row;
				background: #fff8e1;
				border-radius: 20px;
				height: 32px;
				line-height: 32px;
				justify-content: center;
				align-items: center;
				padding: 0px 3px;
				font-family: normal;
				margin-bottom: 10px;

				.search_left {
					width: 50px;
					background-image: url(/static/image/app/fangdajing.png);
					height: 50px;
					background-size: 22px;
					background-repeat: no-repeat;
					background-position: center center;
				}

				.search_center {
					flex: 1;
				}

				.search_right {
					width: 60px;
					background: black;
					border-radius: 20px;
					height: 26px;
					line-height: 26px;
					font-size: 14px;
				}
			}
		}
	}

	.level_3 {
		flex: 1;
		border-radius: 20px;
		color: white;
	}



	.range {
		color: #fff;
		margin-top: 18px;
		font-size: 18px;
	}



	.operate {
		position: absolute;
		top: 10px;
		right: 12px;
		width: 30px;

		.rank-icon {
			width: 30px;
			height: 30px;
			border-radius: 4px;
			background: linear-gradient(to top, #fff497, #ffd16b);
			box-shadow: 0 4px 0 0 #d9b059;
			margin-bottom: 12px;

			.img {
				width: 30px;
				height: 30px;
			}
		}

		.rank-icon-null {
			background: linear-gradient(to top, #cfcfcf, #a1a1a1);
			box-shadow: 0 4px 0 0 #969696;
		}
	}

	.title111 {
		color: #fff;
		font-size: 24px;
		margin-bottom: 4px;
	}

	.title222 {
		color: #fff;
		font-size: 14px;
	}
</style>